@layout('layouts/app')

@section('body')
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
              @if(profile.avatar)
                <img src="{{ profile.avatar }}" class="user-img"/>
              @endif
              <h4 role="heading" aria-level="1">{{ profile.name }}</h4>
              @if(profile.bio)
                <p>{{ profile.bio }}</p>
              @endif
              @if(profile.userId !== auth.user?.id)
                @!profiles.follow({ profile })
              @endif
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                @navLink({ path: route('profiles.show', { name: encodeURIComponent(profile.name) }) })
                  My Articles
                @end
              </li>
              <li class="nav-item">
                @navLink({ path: route('profiles.show.favorites', { name: encodeURIComponent(profile.name) }) })
                  Favorited Articles
                @end
              </li>
            </ul>
          </div>

          @!articles.list({ articles })
        </div>
      </div>
    </div>
  </div>
@end
